<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>矩形的绘制</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
		canvas {
			/* 样式属性设置宽高会拉伸内容区
			请不要在此处设置宽高
			这里是内容区边框 */
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<canvas width='500' height='400'></canvas>
	<script>
		// 矩形的绘制
		// 1. 建立<canvas>标签
		// 2. 获取<canvas>内容区
		// 注意: <canvas>内容区默认属性 width='300' height='150'
		const oC = document.querySelector('canvas');
		const cxt = oC.getContext('2d');

		// 3. 调用矩形绘制函数
		cxt.rect(100,100,100,100);	// 起始X轴, 起始Y轴, X轴长度, Y轴长度

		// 4. 绘制

		// 绘制笔触
		cxt.stroke();

		// 填充图形, 默认颜色为黑色
		//cxt.fill();
	</script>
</body>

</html>